<template>
  <div class="views">
    <el-radio-group v-model="radio" @change="onRadio" text-color="#000">
      <el-radio :label="1">全部</el-radio>
      <el-radio :label="2">酒店</el-radio>
      <el-radio :label="3">目的地</el-radio>
      <el-radio :label="4">去旅行</el-radio>
      <el-radio :label="5">机票</el-radio>
    </el-radio-group>
    <div class="foot">
      <input type="text" v-show="radio == 1" placeholder="搜目的地/攻略/酒店/旅行特价" />
      <input type="text" v-show="radio == 2" placeholder="酒店" />
      <input type="text" v-show="radio == 3" placeholder="目的地" />
      <input type="text" v-show="radio == 4" placeholder="去旅行" />
      <input type="text" v-show="radio == 5" placeholder="机票" />
      <el-button type="primary" icon="el-icon-search"></el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 1
    };
  },
  methods: {
    onRadio(el) {
      console.log(el);
    }
  }
};
</script>

<style lang="stylus" scoped>
.views {
  width: 630px;
  height: 110px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 20px 15px 15px;
  box-sizing: border-box;

  .foot {
    display: flex;
    align-items: flex-end;
    margin-top: 5px;

    input {
      height: 46px;
      width: 520px;
      margin-right: 5px;
      outline: none;
      border-radius: 7px;
      border: none;
      box-sizing: border-box;
      padding-left: 15px;
      font-size: 16px;
    }
  }
}
</style>
<style >
.el-radio__input.is-checked + .el-radio__label {
  color: #fff;
}
.el-radio {
  color: #fff;
}
.el-radio__input.is-checked .el-radio__inner {
  border-color: orange;
  background: orange;
}
.el-button--primary {
  background-color: orange;
  border-color: orange;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background-color: darkorange;
  border-color: darkorange;
}

.el-button {
  padding: 9px 11.5px;
  font-size: 25px;
  margin-top: 5px;
}
</style>